<script>
  import { Tabs } from "@ark-ui/svelte/tabs";

  const tabs = [
    {
      value: "overview",
      label: "Tasks",
      badge: 8,
      isSelected: false,
      content: "Manage your daily tasks and assignments.",
    },
    {
      value: "projects",
      label: "Messages",
      badge: 5,
      isSelected: false,
      content: "View conversations and notifications.",
    },
    {
      value: "packages",
      label: "Alerts",
      badge: 2,
      isSelected: true,
      content: "Monitor system alerts and warnings.",
    },
  ];
</script>

<div
  class="bg-white dark:bg-gray-800 w-full px-4 py-12 rounded-xl flex flex-col items-center"
>
  <Tabs.Root defaultValue="packages" class="w-full flex flex-col items-center">
    <Tabs.List class="flex gap-2 mb-8">
      {#each tabs as tab}
        <Tabs.Trigger
          value={tab.value}
          class="flex flex-col items-center gap-3 px-4 py-3 text-sm font-medium text-gray-600 rounded-md transition-all data-selected:bg-gray-200 data-selected:text-gray-900 hover:bg-gray-100 dark:text-gray-300 dark:data-selected:bg-gray-700 dark:data-selected:text-gray-100 dark:hover:bg-gray-700 w-20"
        >
          <div
            class={`flex items-center justify-center w-6 h-6 rounded-full text-white font-semibold text-xs ${
              tab.isSelected
                ? "bg-gray-900 dark:bg-gray-100 dark:text-gray-900"
                : "bg-gray-400 dark:bg-gray-500"
            }`}
          >
            {tab.badge}
          </div>
          {tab.label}
        </Tabs.Trigger>
      {/each}
    </Tabs.List>

    {#each tabs as tab}
      <Tabs.Content
        value={tab.value}
        class="text-center text-gray-600 dark:text-gray-300"
      >
        {tab.content}
      </Tabs.Content>
    {/each}
  </Tabs.Root>
</div>
